<template>
  <div class="projects-page-wrapper">
    <div v-show="!isProjectDetail">
      <el-table :data="projects" style="width: 100%">
        <el-table-column prop="name" label="项目名称">
          <template #default="scope">
            <el-button type="primary" link @click="onClickProject(scope.row.id)">
              {{ scope.row.name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="项目描述" />
        <el-table-column prop="start" label="开始时间" />
        <el-table-column prop="end" label="结束时间" />
      </el-table>
    </div>
    <div v-show="isProjectDetail"><router-view /></div>
  </div>
</template>

<script lang="ts" setup>
import { useProjectService } from '@/service/project-service';
import { Project } from '@/store/project-store';

const router = useRouter();
const route = useRoute();
const projectService = useProjectService();

const isProjectDetail = computed(() => {
  return projectService.getIsProjectDetail(route.name);
});

// 当前用户参与的项目
const projects = ref<Array<Project>>([]);
const loadProjects = () => {
  projectService.projects().then(data => {
    projects.value = data.records ?? [];
  });
};
loadProjects();

const onClickProject = (projectId: string) => {
  router.push({ name: 'Systems', params: { projectId } });
};
</script>
